<template>
    <div id="get-data">
        <el-table 
            :data="getList" 
            class="w-h-100" 
            style="width: 100%" 
            border 
            v-loading="getLoading" 
            element-loading-background="rgba(0, 0, 0, 0.5)"
        >
            <el-table-column 
                v-for="item in headerVal"
                :key="item.id"
                :minWidth="item.minWidth" 
                :show-overflow-tooltip="true" 
                :prop="item.prop" 
                :label="item.label"  
                align="center" 
            />
        </el-table>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , toRefs , watch , onMounted , nextTick } from 'vue';
export default defineComponent( {
    name: 'task-allot',
    components: {},
    props: {
        tabData: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const getList = ref([]);
        const getLoading = ref(false);
        const headerVal = ref();
        watch(()=>props.tabData, (newVal) => {
            getLoading.value = true;
            if(newVal){
                let item = JSON.parse(newVal);
                getList.value = item.bodayVal;
                headerVal.value = item.headerVal;
                getLoading.value = false;
            }
        })
        onMounted(() => {})
        return {
            getList,
            headerVal,
            getLoading,
        }
    }
})
</script>
<style scoped lang="scss">
#get-data{
    height: 100%;
}
</style>